import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { CSS3DRenderer } from "three/addons/renderers/CSS3DRenderer.js";
export let scene, camera, renderer, controls, css3dRenderer;

//初始化
(function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 0.1;
  camera.position.set(5, 5, 5);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
})();

//控制器
(function createControls() {
  controls = new OrbitControls(camera, renderer.domElement);
})();

//坐标轴辅助线
(function createHelper() {
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
})();

//适配
(function resizeRender() {
  window.addEventListener("resize", () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });
})();

//3d渲染器
(function create3dRenderer() {
  css3dRenderer = new CSS3DRenderer();
  css3dRenderer.setSize(window.innerWidth, window.innerHeight);
  css3dRenderer.domElement.style.position = "fixed";
  css3dRenderer.domElement.style.left = "0";
  css3dRenderer.domElement.style.top = "0";
  css3dRenderer.domElement.style.pointerEvents = "none";
  document.body.appendChild(css3dRenderer.domElement);
})();

//动画函数
(function animation() {
  renderer.render(scene, camera);
  controls.update();
  css3dRenderer.render(scene, camera);
  requestAnimationFrame(animation);
})();
